<template>
	<div class="resaleAudiList content-wrap">
		<div class="content-top-box">
			<!-- 搜索区域 -->
			<ul class="search-container">
				<li>
					<span class="search-item-name">等级：</span>
					<el-select v-model="level" placeholder="请选择" clearable @change="changeGrade">
						<el-option v-for="item in gradeType" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<span class="search-item-name">包装方式：</span>
					<el-select v-model="packing" placeholder="请选择" clearable @change="changePaper">
						<el-option v-for="item in paperType" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-button class="search-btn" type="primary" icon="el-icon-search">查询</el-button>
					<el-button class="search-btn" type="primary" icon="el-icon-plus" @click="isAddFun">新增</el-button>
				</li>
			</ul>
		
			<div class="content-bottom-box">
			<!-- 表格 -->
				<div class="content-form-box">
					<el-table v-loading="loadingFlag" :data="tableData" :height="tableHeight" ref="table" border stripe style="width: 100%">
						<el-table-column prop="serialNumber" label="序号" width="50" fixed>
						</el-table-column>
						<el-table-column prop="level" label="木耳等级" width="180" fixed>
						</el-table-column>
						<el-table-column prop="specs" label="木耳规格">
						</el-table-column>
						<el-table-column prop="weight" label="木耳重量" width="180">
							<template slot-scope="scope">
								{{scope.row.weight}} {{scope.row.weightSmallUnit}}
							</template>
						</el-table-column>
						<el-table-column prop="salePrice" label="木耳单价" width="180">
							<template slot-scope="scope">
								{{scope.row.salePrice}} {{scope.row.salePriceUnit}}
							</template>
						</el-table-column>
						<el-table-column prop="stock" label="木耳库存" width="180">
						</el-table-column>
						<el-table-column prop="packing" label="包装方式" width="180">
						</el-table-column>
						<el-table-column label="操作" width="120" fixed="right" class-name="ccc">
							<template slot-scope="scope">
								<el-button @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
								<el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
					<!-- 页码 -->
				<div class="content-Page-container">
					<BaseFormPage :pagination="pagination" @cFirstPageFn="cFirstPageFn" @cLastPageFn="cLastPageFn" @cJumpPageFn="cJumpPageFn" @cPreFn="cPreFn" @cNextFn="cNextFn" @cRefreshFn="cRefreshFn">
					</BaseFormPage>
				</div>
			</div>
		
			
		</div>
			<!--新增/修改 -->
			<el-dialog :title="isAddName" :close-on-press-escape="false" :visible.sync="editRowShow" width="684px" :show-close="false" :close-on-click-modal="false" center>
				<div class="edit-wrap">
					<div class="edit-row">
						<p class="muertitle">木耳等级{{isAddName}}</p>
						<el-form :rules="rules" ref="ruleForm" label-position="right" label-width="110px" :model="isAddData">
							<el-row :gutter="20">
								<el-col :span="12">
									<div class="edit-innerbox">
										<el-form-item label="包装方式" prop="packing">
											<el-input placeholder="请输入包装方式" v-model="isAddData.packing" maxlength="20"></el-input>
										</el-form-item>
										<el-form-item label="木耳等级" prop="level">
											<el-input placeholder="请输入木耳等级" v-model="isAddData.level" maxlength="20"></el-input>
										</el-form-item>
										<el-form-item label="木耳规格" prop="specs">
											<el-input placeholder="请输入木耳规格" v-model="isAddData.specs" maxlength="20"></el-input>
										</el-form-item>
									</div>	
								</el-col>
								<el-col :span="12">
									<div class="edit-innerbox">
										<el-form-item label="木耳重量(kg)" prop="weight">
											<el-input placeholder="请输入木耳重量" type="number" v-model="isAddData.weight" oninput="if(value.length>10)value=value.slice(0,10)"></el-input>
										</el-form-item>
										<el-form-item label="木耳单价" prop="salePrice">
											<el-input placeholder="请输入木耳单价" type="number" v-model="isAddData.salePrice" oninput="if(value.length>10)value=value.slice(0,10)"></el-input>
										</el-form-item>
										<el-form-item label="木耳库存" prop="stock">
											<el-input placeholder="请输入木耳库存" type="number" v-model="isAddData.stock" oninput="if(value.length>10)value=value.slice(0,10)"></el-input>
										</el-form-item>
									</div>	
								</el-col>
							</el-row>	
						</el-form>			
					</div>		
					<div class="edit-footer">
						<div slot="footer">
							<el-button @click="cancelAdd('ruleForm')">取 消</el-button>
							<el-button type="primary" @click="keep('ruleForm')">确认</el-button>
						</div>
					</div>
				</div>					
			</el-dialog>
	
			<el-dialog title="删除" :close-on-press-escape="false" :visible.sync="deleteRowShow" width="341px" :show-close="false" :close-on-click-modal="false" center>
				<div class="delete-wrap">
					<p>请确认是否删除此木耳等级？</p>
					<div class="delete-footer">
						<div slot="footer">
							<el-button @click="deleteRowShow=false">取 消</el-button>
							<el-button type="primary" @click="confirmDelete('ruleForm')">确认</el-button>
						</div>
					</div>
				</div>
			</el-dialog>
	</div>
</template>

<script>
	import Storage from "@/utils/storage";
	import BaseFormPage from '@/components/BaseFormPage';
	export default {
		components: {
			BaseFormPage
		},
		inject: ['reload'],
		data(){
			return {
				isAddName: '',
				level: '',
				packing: '',
				gradeType: [{
					value: '特级',
					label: '特级'
				}, {
					value: '一级',
					label: '一级'
				},{
					value: '二级',
					label: '二级'
				}],
				paperType: [{
					value: '箱',
					label: '箱'
				}, {
					value: '罐',
					label: '罐'
				}],
				rules: {
					packing: [
	                    { required: true, message: '请输入包装方式', trigger: 'blur' }
	                ],
	                level: [
	                    { required: true, message: '请输入木耳等级', trigger: 'blur' }
	                ],
	                specs: [
	                    { required: true, message: '请输入木耳规格', trigger: 'blur' }
	                ],
	                weight: [
	                    { required: true, message: '请输入木耳重量', trigger: 'blur' }
	                ],
	                salePrice: [
	                    { required: true, message: '请输入木耳单价', trigger: 'blur' }
	                ],
	                stock: [
	                    { required: true, message: '请输入木耳库存', trigger: 'blur' }
	                ]
	           },
				tableData: [
					{title: '123213'}
				],
				tableHeight: 300,
				loadingFlag: false,
				pageIndex: 1,
				pageSize: 20,
				pagination: { //分页数据
					loadingFlag: false, //数据加载状态
					currentPage: 1, //当前页
					totalPage: 1, //总页数
					totalNum: 0, //总条数
					firstNum: 0, //分页显示起始值
					endNum: 0 //分页显示结束值
				},
				editRowShow: false,    // 新增弹出框
				deleteRowShow: false, // 删除弹出框
				isAddData:{
					level: '',
					weight: '',
					weightUnit: '',
					weightSmallUnit:'',
					minOrderQuantity: '',
					minOrderQuantityUnit: '',
					specs: '',
					packing: '',
					name: '',
					createTime: '',
					maxOrderQuantity: '',
					maxOrderQuantityUnit: '',
					salePrice: '',
					salePriceUnit: '',
					stock: '',
					quantityUnit: '',
				},
				deleteId: '',   // 删除的id
				
				
			}
		},
		created(){
			this.getListData()
		},
		methods: {
			resetData(){   // 重置数据
				this.isAddData.level = '';
				this.isAddData.weight = '';
				this.isAddData.weightUnit = '';
				this.isAddData.weightSmallUnit = '';
				this.isAddData.minOrderQuantity = '';
				this.isAddData.minOrderQuantityUnit = '';
				this.isAddData.specs = '';
				this.isAddData.packing = '';
				this.isAddData.name = '';
				this.isAddData.createTime = '';
				this.isAddData.maxOrderQuantity = '';
				this.isAddData.maxOrderQuantityUnit = '';
				this.isAddData.salePrice = '';
				this.isAddData.salePriceUnit = '';
				this.isAddData.stock = '';
				this.isAddData.quantityUnit = '';
			},
			getListData() { // 列表
				this.loadingFlag = true;
				this.pagination.loadingFlag = true;
				let params = {
					level: this.level,
					packing: this.packing,
					pgCt: this.pageIndex,
					pgSz: this.pageSize
				}
				if(!this.level) {
					delete params.level
				}
				if(!this.packing) {
					delete params.packing
				}
				this.$http.get('/projectManagement/listFungusCategory', params)
					.then((res) => {
						console.log(res.data.records)
						if(res.data.records.length > 0) {
							this.pagination.totalPage = res.data.pages;
							this.pagination.totalNum = res.data.total;
							res.data.records.forEach((item, index) => {
								//列表下标
								item.index = index;
								//列表序号
								item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
								//无数据处理
								//item.orderRefNo = item.orderRefNo || '--'
							})
							this.pagination.firstNum = res.data.records[0].serialNumber
							this.pagination.endNum = res.data.records[res.data.records.length - 1].serialNumber
						} else {
							this.pagination.currentPage = 1
							this.pagination.totalPage = 1
							this.pagination.totalNum = 0
							this.pagination.firstNum = 0
							this.pagination.endNum = 0
						}
						this.tableData = res.data.records;
					})
					.then(() => {
						if(this.tableData.length !== 0) {
							this.tableHeightFn();
						}
						this.loadingFlag = false;
						this.pagination.loadingFlag = false;
					})

			},
			resetPageIndex() { //重置页码
				this.pagination.currentPage = 1;
				this.pageIndex = 1;
			},
			// 编辑
			editRow(row){
				this.editRowShow = true;
				this.isAddName = '编辑';
				this.isAddData.id = row.id;
				this.isAddData.level = row.level;
				this.isAddData.weight = row.weight;
				this.isAddData.weightUnit = row.weightUnit;
				this.isAddData.weightSmallUnit = row.weightSmallUnit;
				this.isAddData.minOrderQuantity = row.minOrderQuantity;
				this.isAddData.minOrderQuantityUnit = row.minOrderQuantityUnit;
				this.isAddData.specs = row.specs;
				this.isAddData.packing = row.packing;
				this.isAddData.name = row.name;
				this.isAddData.createTime = row.createTime;
				this.isAddData.maxOrderQuantity = row.maxOrderQuantity;
				this.isAddData.maxOrderQuantityUnit = row.maxOrderQuantityUnit;
				this.isAddData.salePrice = row.salePrice;
				this.isAddData.salePriceUnit = row.salePriceUnit;
				this.isAddData.stock = row.stock;
				this.isAddData.quantityUnit = row.quantityUnit;
			},
			// 删除
			deleteRow(row){
				this.deleteRowShow = true;
				this.deleteId = row.id;
			},
			// 搜索   等级
			changeGrade(){
				this.resetPageIndex()
				this.getListData()
			},
			// 包装方式
			changePaper(){
				this.resetPageIndex()
				this.getListData()
			},
			// 新增弹出框
			isAddFun(){
				this.editRowShow = true;
				this.isAddName = '新增'
				this.resetData()
			},
			// 隐藏 新增弹出框
			cancelAdd(formName){
				this.editRowShow = false;
				this.$refs[formName].resetFields();
			},
			// 确定新增
			keep(formName){
				this.$refs[formName].validate((valid)=>{
					if(valid){
						this.isAddData.weightSmallUnit = 'kg/' + this.isAddData.packing;
						this.isAddData.salePriceUnit = '元/' + this.isAddData.packing;
						this.isAddData.minOrderQuantityUnit = this.isAddData.packing + '起';
						this.$http.get('/projectManagement/fungusCategoryAddOrUpdate',this.isAddData)
						.then((res)=>{
							console.log(res)
							this.editRowShow = false;
							this.getListData();
							this.$refs[formName].resetFields();
						})
						console.log(this.isAddData)
					}
				})
			},
			// 确认删除
			confirmDelete(){
				console.log(this.deleteId)
				this.$http.get('/projectManagement/fungusCategoryDelete/' + this.deleteId)
				.then((res)=>{
					this.deleteRowShow = false;
					this.getListData();
					console.log(res)
				})
			},
			cFirstPageFn(pageNum) { //首页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cLastPageFn(pageNum) { //尾页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cJumpPageFn(pageNum) { //页码跳转
				this.pageIndex = pageNum;
				this.getListData()
			},
			cPreFn(pageNum) { //上一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cNextFn(pageNum) { //下一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cRefreshFn() { //刷新
				this.reload()
			},
			tableHeightFn() { //表格高度
				let tableDataLength = this.tableData.length;
				let minHeight = tableDataLength == 0 ? 0 : 80; //根据需求距离底部的高度
				this.$nextTick(function() {
					//window.innerHeight:浏览器的可用高度
					//this.$refs.table.$el.offsetTop：表格距离浏览器的高度
					this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
					if(this.tableData.length <= 0) {
						this.tableHeight = '60vh'
					}

					// 通过捕获系统的onresize事件触发去改变原有的高度
					let self = this;
					window.onresize = function() {
						self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
						self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
					}
				})
			},
			
		}
	}
	
</script>

<style lang="scss" scoped>
.muertitle{
	margin-bottom: 14px;
}
.delete-wrap{
	
	p{
		text-align: center;
		font-size: 16px;
		margin-bottom: 40px;
		margin-top: 20px;
	}
	.delete-footer{
		display: flex;
			justify-content: space-around;
			.el-button {
				margin: 0 20px;
			}
	}
}
.edit-wrap {
		padding: 0 10px;
		.edit-row {
			
		}
		.edit-footer {
			display: flex;
			justify-content: space-around;
			.el-button {
				margin: 20px;
			}
		}
	}
</style>